    <div class="grid">

        <div class="col-12 lg:col-6 xl:col-3">
            <div class="card mb-0">
                <div class="flex justify-content-between mb-3">
                    <div>
                        <span class="block text-500 font-medium mb-3">产品</span>
                        <div class="text-900 font-medium text-xl">{{goods[0].name}}</div>
                    </div>
                    <div class="flex align-items-center justify-content-center bg-blue-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                        <i class="pi pi-shopping-cart text-blue-500 text-xl"></i>
                    </div>
                </div>
                <span class="text-green-500 font-medium">厂商 </span>
                <span class="text-500">沐舟食品</span>
            </div>
        </div>
        <div class="col-12 lg:col-6 xl:col-3">
            <div class="card mb-0">
                <div class="flex justify-content-between mb-3">
                    <div>
                        <span class="block text-500 font-medium mb-3">产地</span>
                        <div class="text-900 font-medium text-xl">{{goods[0].place}}</div>
                    </div>
                    <div class="flex align-items-center justify-content-center bg-orange-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                        <i class="pi pi-map-marker text-orange-500 text-xl"></i>
                    </div>
                </div>
                <span class="text-green-500 font-medium">杨浦区 </span>
                <span class="text-500">五角场</span>
            </div>
        </div>
        <div class="col-12 lg:col-6 xl:col-3">
            <div class="card mb-0">
                <div class="flex justify-content-between mb-3">
                    <div>
                        <span class="block text-500 font-medium mb-3">质检员</span>
                        <div class="text-900 font-medium text-xl">{{goods[0].person}}</div>
                    </div>
                    <div class="flex align-items-center justify-content-center bg-cyan-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                        <i class="pi pi-inbox text-cyan-500 text-xl"></i>
                    </div>
                </div>
                <span class="text-green-500 font-medium">Tel  </span>
                <span class="text-500">17700484620</span>
            </div>
        </div>
        <div class="col-12 lg:col-6 xl:col-3">
            <div class="card mb-0">
                <div class="flex justify-content-between mb-3">
                    <div>
                        <span class="block text-500 font-medium mb-3">质检时间</span>
                        <div class="text-900 font-medium text-xl">{{goods[0].time}}</div>
                    </div>
                    <div class="flex align-items-center justify-content-center bg-purple-100 border-round" [ngStyle]="{width: '2.5rem', height: '2.5rem'}">
                        <i class="pi pi-comment text-purple-500 text-xl"></i>
                    </div>
                </div>
                <span class="text-green-500 font-medium">质量 </span>
                <span class="text-500">合格</span>
            </div>
        </div>


        <div class="col-12 xl:col-6">
            <div class="card">
                <div style="display: flex; align-items: center; justify-content: space-between;">
                    <h5>产品记录</h5>
                    <div class="search-container">
                        <p-inputGroup>
                            <input name="searchValue" type="text" placeholder="Search by ID" [(ngModel)]="searchValue">
                            <button  type="button" pButton label="搜索" (click)="searchById(searchValue)"></button>
                        </p-inputGroup>
                    </div>
                </div>

                <p-table [value]="goods" [paginator]="true" [rows]="4" responsiveLayout="scroll">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>序号</th>
                            <th pSortableColumn="name">产品id <p-sortIcon field="name"></p-sortIcon></th>
                            <th pSortableColumn="price">加工工厂 <p-sortIcon field="price"></p-sortIcon></th>
                            <th>更新原因</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-good>
                        <tr>
<!--                            <td style="width: 15%; min-width: 5rem;">-->
<!--                                <img src="assets/demo/images/product/{{product.image}}" class="shadow-4" alt="{{product.name}}" width="50">-->
<!--                            </td>-->
                            <td style="width: 15%; min-width: 7rem;">{{good.updateRecord}}</td>
                            <td style="width: 35%; min-width: 7rem;">{{good.goodsId}}</td>
                            <td style="width: 35%; min-width: 8rem;">{{good.fac }}</td>
                            <td style="width: 35%; min-width: 7rem;">{{good.reason}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>
        </div>


        <div class="col-12 xl:col-6">
            <div class="card">
                <h5>生长环境</h5>
                <p-chart type="line" [data]="chartData" [options]="chartOptions"></p-chart>
            </div>
        </div>
</div>

